class MyShadowElement extends HTMLElement {
  constructor(message) {
    super() // 总是首先调用super()方法

    // 为这个自定义元素创建一个 shadow root
    const shadow = this.attachShadow({ mode: 'open' })

    const style = document.createElement('style')
    shadow.appendChild(style)

    // 在 shadow dom 中添加一些HTML内容
    this.wrapper = document.createElement('div')
    this.wrapper.setAttribute('class', 'wrapper')

    this.container = document.createElement('div')
    this.container.setAttribute('class', 'container')
    this.container.appendChild(this.wrapper)
    shadow.appendChild(this.container)
  }

  setStyle(style) {
    this.shadowRoot.querySelector('style').textContent = style
  }

  appendWrapper(dom) {
    this.wrapper.innerHTML = dom
  }

  appendCanvas(canvas) {
    this.container.appendChild(canvas)
  }

  getWrapper() {
    return this.wrapper
  }

  getContainer() {
    return this.container
  }

  toggleShowWrapper(bol) {
    this.wrapper.style.display = bol ? 'block' : 'none'
  }

  clearWrapper() {
    this.wrapper.innerHTML = ''
  }

  clearCanvas() {
    this.wrapper.innerHTML = ''
  }
}

export default MyShadowElement
